<template>
  <div v-if="checkData">
    <h2 style="text-align:center;">{{checkData.MainTitle}}</h2>

    <!-- 图片列表
 最多五张 在一行排开 并且点击图片放大 可以进行滑动看图片
    -->
    <div>
      <el-image
        v-for="(item,index) in imgUrl"
        :key="index"
        style="width: 200px; height: 200px;margin-right:10px;"
        :src="item"
        :preview-src-list="imgUrl"
      ></el-image>
    </div>
    <!-- 商品基本信息  
     像淘宝详情页一般展示
    -->
    <ul>
      <li>分类名称：{{checkData.GoodsTypeFullName}}</li>
      <li>商品名称：{{checkData.GoodsName}}</li>
      <li>商品描述：{{checkData.GoodsDetail }}</li>
      <li>商品编号：{{checkData.GoodsId}}</li>
      <li>重量：{{checkData.Weight}}</li>
      <li>商品状态：{{checkData.Status}}</li>
    </ul>
    <!-- 规格价格 -->
    <h5>规格价格</h5>
    <el-table ref="sizetable" :data="sizeData" size="small" style="width: 100%;" border stripe>
      <el-table-column prop="SpecName" label="规格价格名称" />
      <el-table-column prop="PriceSupply" label="供货价" />
      <el-table-column prop="Price" label="价格id" />
      <el-table-column prop="Stock" label="库存" />
    </el-table>
    <!-- 参数模型 -->
    <h5>参数模型</h5>
    <el-table
      ref="argumenttable"
      :data="argumentData"
      size="small"
      style="width: 100%;"
      border
      stripe
    >
      <el-table-column prop="Name" label="属性名称" />
      <el-table-column prop="Prompt" label="提示信息" />
      <el-table-column prop="Sort" label="排序" />
      <el-table-column prop="Unit" label="单位" />
      <el-table-column prop="ParaValue" label="参数值" />
      <el-table-column prop="GoodsTypeName" label="分类名称" />
    </el-table>
    <br />

    <!-- 详情图片列表  -->
    <el-collapse v-model="activeNames">
      <el-collapse-item title="详情图片列表" name="1">
        详情图片
        <!-- <div v-for="item in imgInfoUrl" :key="item">
          <img :src="item" alt="222" />
        </div>-->
      </el-collapse-item>
    </el-collapse>
    <br />



    <!--  <el-button type="primary" @click="isCheck">审核通过</el-button>
    <el-button @click="checkVisible = false">审核不通过</el-button>-->
  </div>
  <!-- 一个商品审核：参数都需要传
    批量商品审核：前三个参数必传   
                批量商品审核通过可以不传意见 
                批量商品审核不通过必须传意见

  -->
</template>

<script>
import store from "@/store";
import setting from "@/setting";
import { getManagementCheck, checkApi } from "@/api/platProduct/management";

export default {
  name: "productCheck",
  data() {
    return {
      myHeaders: {
        Authorization: "",
      },
      checkData: null,
      activeNames: [],
      sizeData: [],
      argumentData: [],
      imgUrl: [],
      imgInfoUrl: [],
      suggest: "",

      //上传示意图
      uploadUrl: setting.uploadUrl,
      fileListCheckPic: [],
      checkPicDialogImageUrl: "", // 示意图路径
      checkPicDialogVisible: false,
      checkImgUrls: [],
    };
  },
  props: {
    Id: {
      type: String,
      default: "",
      required: true,
    },
 /*    title: {
      type: String,
      default: "",
      required: true,
    }, */
  },
  watch: {
    Id(newValue, oldValue) {
      if (newValue) {
        this.checkData = [];
        this.sizeData = [];
        this.argumentData = [];
        this.imgUrl = [];
        this.imgInfoUrl = [];
        // this.suggest = ""; 
        // this.checkImgUrls = [];
        // this.fileListCheckPic =[];
        this.getCheckData();
      }
    },
  },
  methods: {
    getCheckData() {
      let param = {
        Id: this.Id,
      };
      getManagementCheck(param).then((res) => {
        if (res.status == 200) {
          if (res.data.code == 0) {
            this.checkData = res.data.data;
            this.sizeData = res.data.data.Pricemodels;
            this.argumentData = res.data.data.Parammodels;
            // this.imgUrl = 
            this.imgUrl = [
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606479619055&di=696897f4028cdabe1bb22a045d9d5fe7&imgtype=0&src=http%3A%2F%2Fwww.2qqtouxiang.com%2Fpic%2FTP4849_01.jpg",
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606479784413&di=528eb48ff460683bb47f80e457bacb7b&imgtype=0&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2F932ca9934baf734b3160fc76bc761dcf.jpeg",
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606479619055&di=696897f4028cdabe1bb22a045d9d5fe7&imgtype=0&src=http%3A%2F%2Fwww.2qqtouxiang.com%2Fpic%2FTP4849_01.jpg",
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606479619055&di=696897f4028cdabe1bb22a045d9d5fe7&imgtype=0&src=http%3A%2F%2Fwww.2qqtouxiang.com%2Fpic%2FTP4849_01.jpg",
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606479619055&di=696897f4028cdabe1bb22a045d9d5fe7&imgtype=0&src=http%3A%2F%2Fwww.2qqtouxiang.com%2Fpic%2FTP4849_01.jpg",
            ];
            this.imgInfoUrl = res.data.data.InfoImgUrls;
          } else {
            this.$message.warning(res.data.msg);
            // this.$emit("closeDialog", false);
          }
        }
      });
    },
 /*    // 示意图上传前操作
    handlePreviewCheckPic(file) {
      this.checkPicDialogImageUrl = file.url;

      this.checkPicDialogVisible = true;
    },
    // 示意图删除操作
    handleRemoveCheckPic(file) {
      let currentImg = file.response.data;
      this.checkImgUrls = this.checkImgUrls.filter(
        (item) => item != currentImg
      );
    },
    // 示意图上传成功
    handleSuccessCheckPic(response, file, fileList) {
      if (response.code === 0) {
        let imgurls = response.data;
        this.checkImgUrls.push(imgurls);
      }
    },
    //审核通过
    isCheck() {
      let GoodsIds = [];
      GoodsIds.push(this.checkData.GoodsId);
      let _send = {
        GoodsIds: GoodsIds,
        Status: 1,
        CheckRemark: this.suggest,
        CheckImgUrls: this.checkImgUrls,
      };
      checkApi(_send)
        .then((res) => {
          if (res.status == 200) {
            if (res.data.code == 0) {
              this.$message.success(res.data.msg);
              this.$emit("closeDialog", false);
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //审核不通过
    isCheckNo() {
      let GoodsIds = [];
      GoodsIds.push(this.checkData.GoodsId);
      let _send = {
        GoodsIds: GoodsIds,
        Status: 2,
        CheckRemark: this.suggest,
        CheckImgUrls: this.checkImgUrls,
      };
      checkApi(_send).then((res) => {
        if (res.status == 200) {
          if (res.data.code == 0) {
            this.$message.success(res.data.msg);
            this.$emit("closeDialog", false);
          }
        }
      }).catch(error=>{
        console.log(error);
      });
    }, */
    /*    detailSubmit(){
      console.log("ok");
    } */
    //向父组件传值
    /*  handleSend() {
      // console.log(this.fileListCheckPic || this.suggest);
      if (this.fileListCheckPic || this.suggest) {
        // console.log(2222);
        if (this.checkData) {
          let GoodsIds = [];
          GoodsIds.push(this.checkData.GoodsId);
          let _send = {
            GoodsIds: GoodsIds,
            Status: this.checkData.status,
            CheckRemark: this.suggest,
            CheckImgUrls: this.fileListCheckPic,
          };
          console.log("send-------");
          console.log(_send);
          this.$emit("sendData", _send);
        }
      }
    }, */
  },
  created() {
    this.getCheckData();
/*     const token = store.getters.access_token;
    this.myHeaders.Authorization = "Bearer " + token; */
  },
  mounted() {
   
    setTimeout(()=>{
      this.$emit('sendData',this.checkData);
    },1000)
    
  },
  updated() {},
};
</script>

<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 5px 0;
  overflow: hidden;
}
li {
  list-style: none;
  width: 50%;
  float: left;
}
</style>